@charset "utf-8";
/* CSS Document */
body{
	background: #000;
}
body.secondary {
	background: skyblue;
	height: auto;
}
html {
     height: 100%;
}       
h1 {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 30px;
    line-height: 1.1;
    color: #ffffff;
    z-index: 1;
	align: center;
}       
h2 {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 26px;
    line-height: 1.1;
    color: #ffffff;
    z-index: 1;
	align: center;
}       
h3 {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 24px;
    line-height: 1.1;
    color: #ffffff;
    z-index: 1;
	align: center;
}
.wrapper {
	width: 200px;
	height: 200px;
	margin: 220px auto;
	perspective: 400px;
}
.box-area {
	width: 200px;
	animation: rotate 15s linear infinite;
	transform-style: preserve-3d;
}
.box-area img {
	height: 200px;
	width: 200px;
}
.box-area div {
	position: absolute;
	width: 200px;
	height: 200px;
}
.box1 {
	transform: translateZ(100px);
}
.box2 {
	transform: rotateY(180deg) translateZ(100px);
}
.box3 {
	transform: rotateY(-90deg) translateX(-100px);
	transform-origin: left;
}
.box4 {
	transform: rotateY(90deg) translateX(100px);
	transform-origin: right;
}
@keyframes rotate {
    0% { transform: rotateY(0); }
    100% { transform: rotateY(360deg); }
}
.shadow {
    width: 100px;
    height: 100px;
    background: rgba(118,172,196,0.8);
    box-shadow: 0 0 25px 25px rgba(118,172,196,0.8);
    -webkit-transform: rotateX(90deg) translateZ(-120px) 
	rotateY(180deg) translateX(0px);
}